// TravelPlanner.vue

<template>
  <div class="travel-wizard">
    <nav-bar></nav-bar>
    <!-- 进度条 -->
    <div class="progress-bar">
      <div class="progress-inner" :style="{ width: progressWidth + '%' }"></div>
    </div>

    <!-- 主内容区域 -->
    <div class="wizard-container">
      <!-- 欢迎页 -->
      <div v-if="currentStep === 0" class="welcome-screen">
        <div class="welcome-content">
          <div class="welcome-icon">🌴</div>
          <h1>您好，</h1>
          <h2>让我们规划您的完美旅行！</h2>
          <button class="start-button" @click="nextStep">
            开始 <span class="arrow">→</span>
          </button>
        </div>
      </div>

      <!-- 步骤1: 基本信息 -->
      <div v-if="currentStep === 1" class="step-screen">
        <div class="step-header">
          <h2>基本旅行信息</h2>
          <p class="step-description">请告诉我们您的身份和团队信息</p>
        </div>

        <div class="form-container">
          <div class="input-group">
            <label>您的身份是</label>
            <input v-model="planData.identity" type="text" placeholder="例如：年轻夫妻/朋友/家庭..." class="text-input" />
          </div>

          <div class="input-group">
            <label>团队人数</label>
            <div class="number-selector">
              <button @click="decreaseNumber('totalPeople')" class="number-btn">-</button>
              <span class="number-display">{{ planData.totalPeople }}</span>
              <button @click="increaseNumber('totalPeople')" class="number-btn">+</button>
            </div>
          </div>

          <div class="gender-group">
            <div class="input-group half-width">
              <label>男性人数</label>
              <div class="number-selector">
                <button @click="decreaseNumber('malePeople')" class="number-btn">-</button>
                <span class="number-display">{{ planData.malePeople }}</span>
                <button @click="increaseNumber('malePeople')" class="number-btn">+</button>
              </div>
            </div>
            <div class="input-group half-width">
              <label>女性人数</label>
              <div class="number-selector">
                <button @click="decreaseNumber('femalePeople')" class="number-btn">-</button>
                <span class="number-display">{{ planData.femalePeople }}</span>
                <button @click="increaseNumber('femalePeople')" class="number-btn">+</button>
              </div>
            </div>
          </div>
        </div>

        <div class="fixed-actions">
          <button class="continue-button" @click="nextStep">
            继续 <span class="arrow">→</span>
          </button>
        </div>
      </div>

      <!-- 步骤2: 目的地和出发城市 -->
      <div v-if="currentStep === 2" class="step-screen">
        <div class="step-header">
          <h2>旅行目的地</h2>
          <p class="step-description">添加您想去的地方和出发地</p>
        </div>

        <div class="form-container">
          <div class="destination-section">
            <h3>目的地</h3>
            <div class="selected-destinations">
              <div v-for="(dest, index) in selectedDestinations" :key="index" class="destination-tag">
                {{ dest }}
                <span class="remove-tag" @click="removeDestination(index)">×</span>
              </div>
              <button @click="showDestinationPicker = true" class="add-destination-btn">
                <span class="plus-icon">+</span> 添加目的地
              </button>
            </div>
          </div>

          <div class="input-group">
            <label>出发城市</label>
            <button @click="showDeparturePicker = true" class="city-select-btn">
              {{ planData.departureCity || '选择出发城市' }}
              <span class="dropdown-icon">▼</span>
            </button>
          </div>
        </div>

        <!-- 城市选择级联菜单 - 目的地 -->
        <div v-if="showDestinationPicker" class="city-picker-overlay" @click.self="showDestinationPicker = false">
          <div class="city-picker">
            <div class="city-picker-header">
              <h3>选择目的地</h3>
              <button class="close-picker" @click="showDestinationPicker = false">×</button>
            </div>
            <div class="city-picker-content">
              <!-- 省份选择 -->
              <div class="city-column">
                <div
                    v-for="province in provinces"
                    :key="province.value"
                    :class="['city-item', selectedProvince === province.value ? 'active' : '']"
                    @click="selectProvince(province.value)"
                >
                  {{ province.label }}
                </div>
              </div>
              <!-- 城市选择 -->
              <div class="city-column">
                <div
                    v-for="city in filteredCities"
                    :key="city.value"
                    :class="['city-item', selectedCity === city.value ? 'active' : '']"
                    @click="selectCity(city.value)"
                >
                  {{ city.label }}
                </div>
              </div>
              <!-- 区域选择 -->
              <div class="city-column">
                <div
                    v-for="district in filteredDistricts"
                    :key="district.value"
                    :class="['city-item']"
                    @click="addDestination(district.label)"
                >
                  {{ district.label }}
                </div>
              </div>
            </div>
            <div class="city-picker-footer">
              <button class="cancel-btn" @click="showDestinationPicker = false">取消</button>
              <button class="confirm-btn" @click="confirmDestination">确定</button>
            </div>
          </div>
        </div>

        <!-- 城市选择级联菜单 - 出发地 -->
        <div v-if="showDeparturePicker" class="city-picker-overlay" @click.self="showDeparturePicker = false">
          <div class="city-picker">
            <div class="city-picker-header">
              <h3>选择出发城市</h3>
              <button class="close-picker" @click="showDeparturePicker = false">×</button>
            </div>
            <div class="city-picker-content">
              <div class="city-column">
                <div
                    v-for="province in provinces"
                    :key="province.value"
                    :class="['city-item', departureProvince === province.value ? 'active' : '']"
                    @click="selectDepartureProvince(province.value)"
                >
                  {{ province.label }}
                </div>
              </div>
              <div class="city-column">
                <div
                    v-for="city in filteredDepartureCities"
                    :key="city.value"
                    :class="['city-item']"
                    @click="selectDepartureCity(city.label)"
                >
                  {{ city.label }}
                </div>
              </div>
            </div>
            <div class="city-picker-footer">
              <button class="cancel-btn" @click="showDeparturePicker = false">取消</button>
              <button class="confirm-btn" @click="confirmDeparture">确定</button>
            </div>
          </div>
        </div>

        <div class="fixed-actions">
          <button class="back-button" @click="prevStep">
            <span class="arrow">←</span> 上一步
          </button>
          <button class="continue-button" @click="nextStep" :disabled="selectedDestinations.length === 0 || !planData.departureCity">
            继续 <span class="arrow">→</span>
          </button>
        </div>
      </div>

      <!-- 步骤3: 行程天数 -->
      <div v-if="currentStep === 3" class="step-screen">
        <div class="step-header">
          <h2>行程安排</h2>
          <p class="step-description">选择您的旅行天数</p>
        </div>

        <div class="form-container">
          <div class="input-group">
            <label>旅行天数</label>
            <div class="number-selector">
              <button @click="decreaseNumber('days')" class="number-btn">-</button>
              <span class="number-display">{{ planData.days }}</span>
              <button @click="increaseNumber('days')" class="number-btn">+</button>
            </div>
          </div>

          <div class="input-group">
            <label>住宿晚数</label>
            <div class="number-selector">
              <button @click="decreaseNumber('nights')" class="number-btn">-</button>
              <span class="number-display">{{ planData.nights }}</span>
              <button @click="increaseNumber('nights')" class="number-btn">+</button>
            </div>
          </div>
        </div>

        <div class="fixed-actions">
          <button class="back-button" @click="prevStep">
            <span class="arrow">←</span> 上一步
          </button>
          <button class="continue-button" @click="nextStep">
            继续 <span class="arrow">→</span>
          </button>
        </div>
      </div>

      <!-- 步骤4: 旅行偏好 -->
      <div v-if="currentStep === 4" class="step-screen">
        <div class="step-header">
          <h2>旅行偏好</h2>
          <p class="step-description">选择您期望的旅行体验</p>
        </div>

        <div class="form-container">
          <div class="preference-section">
            <h3>旅行风格（多选）</h3>
            <div class="preference-tags">
              <span
                  v-for="tag in travelTags"
                  :key="tag.value"
                  :class="['pref-tag', planData.travelTags.includes(tag.value) ? 'active' : '']"
                  @click="toggleTag(tag.value)"
              >
                {{ tag.label }}
              </span>
            </div>
          </div>

          <div class="preference-section">
            <h3>起床时间</h3>
            <div class="time-selector">
              <select v-model="planData.wakeupTime" class="time-select">
                <option v-for="time in wakeupTimes" :key="time.value" :value="time.value">
                  {{ time.label }}
                </option>
              </select>
            </div>
          </div>

          <div class="preference-section">
            <h3>结束时间</h3>
            <div class="time-selector">
              <select v-model="planData.endTime" class="time-select">
                <option v-for="time in endTimes" :key="time.value" :value="time.value">
                  {{ time.label }}
                </option>
              </select>
            </div>
          </div>

          <div class="preference-section">
            <h3>行程结束后</h3>
            <div class="option-buttons">
              <button
                  v-for="option in eveningOptions"
                  :key="option.value"
                  :class="['option-btn', planData.eveningPlan === option.value ? 'active' : '']"
                  @click="planData.eveningPlan = option.value"
              >
                {{ option.label }}
              </button>
            </div>
          </div>
        </div>

        <div class="fixed-actions">
          <button class="back-button" @click="prevStep">
            <span class="arrow">←</span> 上一步
          </button>
          <button class="continue-button" @click="nextStep">
            继续 <span class="arrow">→</span>
          </button>
        </div>
      </div>

      <!-- 步骤5: 行程特色 -->
      <div v-if="currentStep === 5" class="step-screen">
        <div class="step-header">
          <h2>行程特色</h2>
          <p class="step-description">选择您期望的行程类型</p>
        </div>

        <div class="form-container">
          <div class="preference-section">
            <h3>行程类型</h3>
            <div class="option-buttons">
              <button
                  v-for="option in itineraryTypes"
                  :key="option.value"
                  :class="['option-btn', planData.itineraryType === option.value ? 'active' : '']"
                  @click="planData.itineraryType = option.value"
              >
                {{ option.label }}
              </button>
            </div>
          </div>

          <div class="preference-section">
            <h3>餐饮偏好</h3>
            <div class="option-buttons column-options">
              <button
                  v-for="option in foodOptions"
                  :key="option.value"
                  :class="['option-btn', planData.foodPreference === option.value ? 'active' : '']"
                  @click="planData.foodPreference = option.value"
              >
                {{ option.label }}
              </button>
            </div>
          </div>

          <div class="preference-section">
            <h3>交通方式</h3>
            <div class="option-buttons">
              <button
                  v-for="option in transportOptions"
                  :key="option.value"
                  :class="['option-btn', planData.transport === option.value ? 'active' : '']"
                  @click="planData.transport = option.value"
              >
                {{ option.label }}
              </button>
            </div>
          </div>
        </div>

        <div class="fixed-actions">
          <button class="back-button" @click="prevStep">
            <span class="arrow">←</span> 上一步
          </button>
          <button class="continue-button" @click="nextStep">
            继续 <span class="arrow">→</span>
          </button>
        </div>
      </div>

      <!-- 步骤6: 额外备注 -->
      <div v-if="currentStep === 6" class="step-screen">
        <div class="step-header">
          <h2>额外需求</h2>
          <p class="step-description">添加您的特殊需求和备注</p>
        </div>

        <div class="form-container">
          <div class="special-notes">
            <h3>特别备注</h3>
            <textarea
                v-model="planData.notes"
                placeholder="如有其他特殊需求，请在此填写..."
                rows="5"
                class="notes-textarea"
            ></textarea>
          </div>
        </div>

        <div class="fixed-actions">
          <button class="back-button" @click="prevStep">
            <span class="arrow">←</span> 上一步
          </button>
          <button class="generate-button" @click="generatePlan">
            生成行程 <span class="arrow">→</span>
          </button>
        </div>
      </div>

      <!-- 生成结果页 -->
      <div v-if="currentStep === 7" class="result-screen">
        <div v-if="isGenerating" class="loading-container">
          <div class="loading-spinner"></div>
          <h2>AI正在规划您的旅行...</h2>
          <p>这可能需要10-20秒，请稍候</p>
        </div>
        <div v-else class="json-response-container">
          <pre class="json-content">{{ aiResponse }}</pre>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import {checkTravelPlanStatus, createTravelPlanTask, sendChatMessage} from "@/api/smartTravelStrategy";
import axios from "axios";

export default {
  name: 'TravelPlanner',
  components: { NavBar },
  data() {
    return {
      aiResponse: '',
      fullResponseData: null,
      currentStep: 0,
      isGenerating: false,
      selectedDestinations: [],
      showDestinationPicker: false,
      showDeparturePicker: false,
      selectedProvince: '',
      selectedCity: '',
      departureProvince: '',
      tempDepartureCity: '',
      responseMessage:'',
      planData: {
        // 基本信息
        identity: '',
        totalPeople: 2,
        malePeople: 1,
        femalePeople: 1,

        // 旅行目的地
        departureCity: '',

        // 行程天数
        days: 3,
        nights: 2,

        // 旅行偏好
        travelTags: ['城市'],
        wakeupTime: '8:00',
        endTime: '21:00',
        eveningPlan: 'dinner',

        // 行程特色
        itineraryType: 'mixed',
        foodPreference: 'local',
        transport: 'can-rent',

        // 额外信息
        notes: ''
      },

      // 省份数据
      provinces: [
        { value: 'beijing', label: '北京市' },
        { value: 'hebei', label: '河北省' },
        { value: 'shandong', label: '山东省' },
        { value: 'jiangsu', label: '江苏省' },
        { value: 'zhejiang', label: '浙江省' },
        { value: 'guangdong', label: '广东省' },
        { value: 'sichuan', label: '四川省' },
        { value: 'yunnan', label: '云南省' }
      ],

      // 城市数据
      cities: {
        beijing: [
          { value: 'beijing', label: '北京市' }
        ],
        hebei: [
          { value: 'shijiazhuang', label: '石家庄市' },
          { value: 'tangshan', label: '唐山市' },
          { value: 'xingtai', label: '邢台市' },
          { value: 'baoding', label: '保定市' },
          { value: 'zhangjiakou', label: '张家口市' }
        ],
        // ... 其他省份城市数据 ...
      },

      // 区域数据
      districts: {
        beijing: [
          { value: 'dongcheng', label: '东城区' },
          { value: 'xicheng', label: '西城区' },
          { value: 'chaoyang', label: '朝阳区' },
          { value: 'badaling', label: '八达岭' },
          { value: 'mutianyu', label: '慕田峪' }
        ],
        // ... 其他城市区域数据 ...
      },

      // 旅行标签
      travelTags: [
        { value: '城市', label: '城市' },
        { value: '人文', label: '人文' },
        { value: '自然', label: '自然' },
        { value: '美食', label: '美食' },
        { value: '购物', label: '购物' },
        { value: '历史', label: '历史' },
        { value: '艺术', label: '艺术' },
        { value: '户外', label: '户外' }
      ],

      // 起床时间选项
      wakeupTimes: [
        { value: '6:00', label: '6:00' },
        { value: '7:00', label: '7:00' },
        { value: '8:00', label: '8:00' },
        { value: '9:00', label: '9:00' },
        { value: '10:00', label: '10:00' }
      ],

      // 结束时间选项
      endTimes: [
        { value: '18:00', label: '18:00' },
        { value: '19:00', label: '19:00' },
        { value: '20:00', label: '20:00' },
        { value: '21:00', label: '21:00' },
        { value: '22:00', label: '22:00' },
        { value: '23:00', label: '23:00' }
      ],

      // 晚上安排选项
      eveningOptions: [
        { value: 'dinner', label: '慢慢吃饭' },
        { value: 'rest', label: '回去休息' }
      ],

      // 行程类型选项
      itineraryTypes: [
        { value: 'popular', label: '网红打卡' },
        { value: 'niche', label: '小众特色' },
        { value: 'mixed', label: '经典与小众结合' }
      ],

      // 餐饮偏好选项
      foodOptions: [
        { value: 'local', label: '当地特色' },
        { value: 'popular', label: '人气餐厅' },
        { value: 'hidden', label: '隐藏宝藏' }
      ],

      // 交通方式选项
      transportOptions: [
        { value: 'can-rent', label: '可以租车' },
        { value: 'cannot-rent', label: '不可以租车' }
      ]
    };
  },
  computed: {
    progressWidth() {
      if (this.currentStep === 0) return 0;
      // 7步总进度
      return (this.currentStep / 7) * 100;
    },
    filteredCities() {
      return this.selectedProvince ? this.cities[this.selectedProvince] || [] : [];
    },
    filteredDistricts() {
      return this.selectedCity ? this.districts[this.selectedCity] || [] : [];
    },
    filteredDepartureCities() {
      return this.departureProvince ? this.cities[this.departureProvince] || [] : [];
    }
  },
  methods: {
    nextStep() {
      if (this.currentStep < 7) {
        this.currentStep++;
      }
    },
    prevStep() {
      if (this.currentStep > 0) {
        this.currentStep--;
      }
    },
    decreaseNumber(field) {
      if (this.planData[field] > 1) {
        this.planData[field]--;
      }
    },
    increaseNumber(field) {
      // 设置合理的上限
      const maxValues = {
        totalPeople: 20,
        malePeople: 20,
        femalePeople: 20,
        days: 30,
        nights: 29
      };

      if (this.planData[field] < (maxValues[field] || 10)) {
        this.planData[field]++;
      }
    },
    toggleTag(value) {
      if (this.planData.travelTags.includes(value)) {
        this.planData.travelTags = this.planData.travelTags.filter(v => v !== value);
      } else {
        this.planData.travelTags.push(value);
      }
    },
    formatResponse(text) {
      // 直接返回文本，不进行任何转换
      return text || '';
    },
// 在TravelPlanner.vue中修改generatePlan方法
    async generatePlan() {
      this.isGenerating = true;
      this.nextStep(); // 先进入结果页面显示加载状态
      const rep = await axios.get('/model/jsonModel.txt');
      this.fileContent = rep.data;
      alert(this.fileContent)

      let message = this.fileContent;

      // 构建旅行请求消息
      message += `我们是${this.planData.identity}，共${this.planData.totalPeople}人，${this.planData.malePeople}男${this.planData.femalePeople}女，`;
      message += `打算去${this.selectedDestinations.join('、')}，`;
      message += `请帮我安排一个${this.planData.days}天${this.planData.nights}晚的旅行计划，`;
      message += `最好涵盖${this.planData.travelTags.join('/')}等不同的体验，`;
      message += `我们希望上午${this.planData.wakeupTime}起床，晚上${this.planData.endTime}结束行程，然后${this.planData.eveningPlan === 'dinner' ? '慢慢吃饭' : '回去休息'}，`;
      message += `我们希望行程是${this.planData.itineraryType === 'popular' ? '网红打卡' : this.planData.itineraryType === 'niche' ? '小众特色' : '经典与小众结合'}旅游项目，希望有游客不曾探寻到的特别的当地特色，感受本地的人文气息，`;
      message += `也希望有第一次来${this.selectedDestinations.join('、')}，必须要去一次的旅游目的地，`;
      message += `请帮我们安排好早中晚餐，吃的不重样，最好是本地特色，否则也要是当地人常吃得到宝藏餐馆，不要说该吃什么，直接告诉我去那家店吃，`;
      message += `计划里还涵盖交通方式，以及交通时间，我${this.planData.transport === 'can-rent' ? '可以' : '不可以'}租车`;

      // 使用API创建任务
      createTravelPlanTask(message)
          .then(response => {
            console.log("完整响应:", response);
            console.log("响应数据:", response.taskId);
            if (response && response.taskId) {
              // 获取到任务ID后开始轮询结果
              alert(response.taskId)
              this.pollTaskResult(response.taskId);
            } else {
              this.aiResponse = "创建任务失败，请重试1";
              this.isGenerating = false;
            }
          })
          .catch(error => {
            console.error("创建任务失败:", error);
            this.aiResponse = "创建任务失败，请重试2";
            this.isGenerating = false;
          });
    },

// 轮询任务结果
    // 修改后的方法 - 只展示纯JSON
    // Improved pollTaskResult method to fix JSON parsing
    pollTaskResult(taskId) {
      const maxAttempts = 120; // Maximum 120 attempts
      let attempts = 0;

      const checkResult = () => {
        attempts++;

        checkTravelPlanStatus(taskId)
            .then(response => {
              if (response) {
                if (response.status === "completed") {
                  // Task completed
                  if (response.result && response.result.result &&
                      response.result.result.output) {
                    const responseText = response.result.result.output.content;
                    console.log("Raw response:", responseText);

                    // More robust JSON extraction
                    try {
                      // Try to find JSON in markdown code block
                      const jsonMatch = responseText.match(/```json\s*([\s\S]*?)\s*```/);
                      if (jsonMatch && jsonMatch[1]) {
                        try {
                          // Parse the extracted JSON
                          const jsonData = JSON.parse(jsonMatch[1].trim());
                          this.fullResponseData = jsonData;
                          this.aiResponse = JSON.stringify(jsonData, null, 2);
                          console.log("Successfully extracted JSON data:", this.fullResponseData);
                          this.$router.push({
                            path: '/travelGuidePage',
                            query: { aiResponse: this.aiResponse }
                          });
                        } catch (parseError) {
                          console.error("JSON parsing error:", parseError);
                          // Try to clean up the JSON before parsing again
                          try {
                            const cleanedJson = jsonMatch[1].trim().replace(/[\u200B-\u200D\uFEFF]/g, '');
                            const jsonData = JSON.parse(cleanedJson);
                            this.fullResponseData = jsonData;
                            this.aiResponse = JSON.stringify(jsonData, null, 2);
                            console.log("Successfully parsed cleaned JSON data");
                          } catch (cleanError) {
                            console.error("Failed to parse cleaned JSON:", cleanError);
                            this.aiResponse = "JSON数据解析失败：" + cleanError.message;
                          }
                        }
                      } else {
                        // If no JSON in code block, try to find JSON directly in the text
                        try {
                          // Look for JSON objects directly in the response
                          const possibleJson = responseText.match(/(\{[\s\S]*\})/);
                          if (possibleJson && possibleJson[1]) {
                            const jsonData = JSON.parse(possibleJson[1]);
                            this.fullResponseData = jsonData;
                            this.aiResponse = JSON.stringify(jsonData, null, 2);
                            console.log("Found JSON directly in response");
                          } else {
                            this.aiResponse = "响应中未找到JSON内容，原始响应：\n\n" + responseText;
                            this.fullResponseData = null;
                          }
                        } catch (directJsonError) {
                          console.error("Failed to find direct JSON:", directJsonError);
                          this.aiResponse = "无法提取JSON: " + directJsonError.message +
                              "\n\n原始响应：\n\n" + responseText;
                        }
                      }
                    } catch (error) {
                      console.error("JSON extraction error:", error);
                      this.aiResponse = "JSON数据提取失败: " + error.message;
                      this.fullResponseData = null;
                    }
                  } else {
                    this.aiResponse = "错误：数据格式不正确";
                  }
                  this.isGenerating = false;
                } else if (response.status === "processing") {
                  // Task still processing
                  if (attempts < maxAttempts) {
                    setTimeout(checkResult, 3000); // Check again after 3 seconds
                  } else {
                    this.aiResponse = "生成超时";
                    this.isGenerating = false;
                  }
                } else if (response.status === "failed") {
                  // Task failed
                  this.aiResponse = "生成行程失败: " +
                      (response.errorMessage || "未知错误");
                  this.isGenerating = false;
                } else {
                  // Other status
                  this.aiResponse = "未知任务状态";
                  this.isGenerating = false;
                }
              } else {
                this.aiResponse = "获取任务状态失败";
                this.isGenerating = false;
              }
            })
            .catch(error => {
              console.error("检查任务状态失败:", error);
              if (attempts < maxAttempts) {
                setTimeout(checkResult, 3000); // Continue trying after error
              } else {
                this.aiResponse = "获取结果失败";
                this.isGenerating = false;
              }
            });
      };

      // Start checking
      checkResult();
    },
    selectProvince(provinceValue) {
      this.selectedProvince = provinceValue;
      this.selectedCity = '';
    },
    selectCity(cityValue) {
      this.selectedCity = cityValue;
    },
    selectDepartureProvince(provinceValue) {
      this.departureProvince = provinceValue;
      this.tempDepartureCity = '';
    },
    selectDepartureCity(cityLabel) {
      this.tempDepartureCity = cityLabel;
    },
    addDestination(district) {
      if (!this.selectedDestinations.includes(district) && this.selectedDestinations.length < 5) {
        this.selectedDestinations.push(district);
      }
      this.showDestinationPicker = false;
    },
    removeDestination(index) {
      this.selectedDestinations.splice(index, 1);
    },
    confirmDestination() {
      this.showDestinationPicker = false;
    },
    confirmDeparture() {
      if (this.tempDepartureCity) {
        this.planData.departureCity = this.tempDepartureCity;
      }
      this.showDeparturePicker = false;
    }
  }
};
</script>

<style scoped>
.travel-wizard {
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  max-width: 100%;
  margin: 0 auto;
  background-color: #f9f7f3;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

/* 进度条 */
.progress-bar {
  height: 3px;
  background-color: #e6e9ed;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.progress-inner {
  position: absolute;
  height: 100%;
  background-color: #FF9C4A;
  transition: width 0.3s ease;
}

/* 主容器 */
.wizard-container {
  height: calc(100vh - 3px);
  overflow: hidden;
  position: relative;
}

/* 欢迎页面 */
.welcome-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-align: center;
  height: 100%;
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  overflow: hidden;
}

.welcome-content {
  max-width: 500px;
}

.welcome-icon {
  font-size: 70px;
  margin-bottom: 20px;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.welcome-screen h1 {
  font-size: 40px;
  margin-bottom: 10px;
  font-weight: 600;
  color: #333;
}

.welcome-screen h2 {
  font-size: 24px;
  margin-bottom: 40px;
  font-weight: 400;
  color: #555;
}

.start-button {
  background: linear-gradient(to right, #FF9C4A, #FF7E5F);
  color: white;
  border: none;
  padding: 16px 40px;
  border-radius: 50px;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(255, 156, 74, 0.4);
}

.start-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(255, 156, 74, 0.5);
}

.arrow {
  font-size: 20px;
}

/* 步骤页面通用样式 */
.step-screen {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  height: calc(100vh - 3px);
  overflow-y: auto;
  position: relative;
  padding-bottom: 80px; /* 为固定按钮留出空间 */
}

.step-header {
  text-align: center;
  margin-bottom: 30px;
}

.step-header h2 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}

.step-description {
  color: #666;
  font-size: 16px;
}

.fixed-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 15px 20px;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  z-index: 10;
}

.back-button, .continue-button, .generate-button {
  background-color: #FF9C4A;
  color: white;
  border: none;
  padding: 14px 30px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s;
  box-shadow: 0 4px 10px rgba(255, 156, 74, 0.3);
}

.back-button {
  background-color: transparent;
  color: #FF9C4A;
  border: 1px solid #FF9C4A;
  box-shadow: none;
}

.back-button:hover {
  background-color: rgba(255, 156, 74, 0.1);
  transform: translateY(-2px);
}

.continue-button:hover, .generate-button:hover {
  background-color: #FF7E5F;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(255, 156, 74, 0.4);
}

.continue-button:disabled, .generate-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 表单容器样式 */
.form-container {
  background-color: white;
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.input-group {
  margin-bottom: 20px;
}

.input-group label {
  display: block;
  font-size: 16px;
  margin-bottom: 10px;
  font-weight: 500;
  color: #444;
}

.text-input {
  width: 100%;
  padding: 12px 15px;
  border-radius: 10px;
  border: 1px solid #ddd;
  font-size: 16px;
  transition: border-color 0.2s;
}

.text-input:focus {
  border-color: #FF9C4A;
  outline: none;
}

/* 人数选择器 */
.number-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  border-radius: 50px;
  overflow: hidden;
  width: 120px;
}

.number-btn {
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  font-size: 20px;
  cursor: pointer;
  color: #555;
}

.number-display {
  width: 40px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
}

.gender-group {
  display: flex;
  gap: 20px;
}

.half-width {
  flex: 1;
}

/* 目的地选择 */
.destination-section {
  margin-bottom: 20px;
}

.destination-section h3 {
  font-size: 16px;
  margin-bottom: 12px;
  font-weight: 500;
  color: #444;
}

.selected-destinations {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.destination-tag {
  background-color: #f0f9ff;
  border: 1px solid #bde0fe;
  color: #0096c7;
  padding: 8px 12px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}

.remove-tag {
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
}

.add-destination-btn {
  background-color: #f0f9ff;
  border: 1px dashed #bde0fe;
  color: #0096c7;
  padding: 8px 15px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.2s;
}

.add-destination-btn:hover {
  background-color: #e1f5fe;
}

.plus-icon {
  font-size: 16px;
  font-weight: bold;
}

.city-select-btn {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid #ddd;
  background-color: white;
  text-align: left;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: border-color 0.2s;
}

.city-select-btn:hover {
  border-color: #FF9C4A;
}

.dropdown-icon {
  color: #999;
  font-size: 12px;
}

/* 城市选择级联菜单 */
.city-picker-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.city-picker {
  background-color: white;
  border-radius: 16px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.city-picker-header {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.city-picker-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.close-picker {
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
}

.city-picker-content {
  display: flex;
  overflow: hidden;
  flex: 1;
  height: 50vh;
}

.city-column {
  flex: 1;
  overflow-y: auto;
  border-right: 1px solid #eee;
}

.city-column:last-child {
  border-right: none;
}

.city-item {
  padding: 12px 15px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.city-item:hover {
  background-color: #f5f5f5;
}

.city-item.active {
  background-color: #f0f9ff;
  color: #0096c7;
  font-weight: 500;
}

.city-picker-footer {
  padding: 15px 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.cancel-btn, .confirm-btn {
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 14px;
  cursor: pointer;
}

.cancel-btn {
  background-color: transparent;
  border: 1px solid #ddd;
  color: #666;
}

.confirm-btn {
  background-color: #FF9C4A;
  border: none;
  color: white;
}

/* 偏好设置样式 */
.preference-section {
  margin-bottom: 25px;
}

.preference-section h3 {
  font-size: 16px;
  margin-bottom: 12px;
  font-weight: 500;
  color: #444;
}

.preference-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pref-tag {
  background-color: #f5f5f5;
  padding: 8px 15px;
  border-radius: 50px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.pref-tag:hover {
  background-color: #ffe8d6;
}

.pref-tag.active {
  background-color: #FF9C4A;
  color: white;
}

/* 时间选择器 */
.time-selector {
  width: 100%;
}

.time-select {
  width: 100%;
  padding: 12px 15px;
  border-radius: 10px;
  border: 1px solid #ddd;
  font-size: 16px;
  background-color: white;
  cursor: pointer;
}

/* 选项按钮 */
.option-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.column-options {
  flex-direction: column;
  align-items: flex-start;
}

.option-btn {
  background-color: #f5f5f5;
  border: 1px solid #eee;
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.option-btn:hover {
  background-color: #ffe8d6;
}

.option-btn.active {
  background-color: #FF9C4A;
  color: white;
  border-color: #FF9C4A;
}

/* 特别备注 */
.special-notes {
  margin-bottom: 20px;
}

.notes-textarea {
  width: 100%;
  padding: 15px;
  border-radius: 12px;
  border: 1px solid #ddd;
  font-size: 14px;
  resize: vertical;
  min-height: 150px;
  transition: border-color 0.2s;
}

.notes-textarea:focus {
  border-color: #FF9C4A;
  outline: none;
}

/* 结果页面 */
.result-screen {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  height: calc(100vh - 3px);
  overflow-y: auto;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.loading-spinner {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid #ffe0c2;
  border-top-color: #FF9C4A;
  animation: spin 1s infinite linear;
  margin-bottom: 25px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-container h2 {
  font-size: 24px;
  margin-bottom: 10px;
  font-weight: 600;
  color: #333;
}

.loading-container p {
  color: #666;
}

.ai-response-card {
  background-color: white;
  color: #333;
  border-radius: 16px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  padding: 25px;
  margin: 20px 0;
  line-height: 1.6;
  white-space: pre-line;
}

/* 响应式调整 */
@media (max-width: 600px) {
  .gender-group {
    flex-direction: column;
    gap: 10px;
  }

  .option-buttons {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>